<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        没有防抖的input
        <input 
            type="text"
            id="unDebounce" 
            placeholder="请输入你要搜索的用户名"
        >
    </div>
    <div>
        防抖后的input
        <input 
            type="text"
            id="debounce" 
            placeholder="请输入你要搜索的用户名"
        >
    </div>
    <script>
        // 不加防抖的
        const inputa = document.getElementById('unDebounce');
        const inputb = document.getElementById('debounce')

        function handleNameSearch(e){
            // console.log(e.target.value)
            const value = e.target.value;
            fetch('http://localhost:3000/users')
                .then(res => res.json())
                .then(data =>{
                    // console.log(data);
                    const users = data;
                    // 数组上es6的新方法, map 转换, filter 过滤
                    // callback
                    const filterUsers= users.filter(user =>{
                        // console.log(user);
                        // 字符串中的新方法
                        // 可读性更好 es6 字符串新增方法
                        return user.name.includes(value)
                        // return user.name.indexOf(value) !== -1
                        // if(user.name)
                    })
                    console.log(filterUsers)
                })
        }
        // 闭包
        
        const debounceNameSearch = debounce(handleNameSearch,1000)
        function debounce(func,delay){
            // 返回值必须得是函数 keyup 事件处理函数
            // let id;
            return function(args){
                clearTimeout(func.id)
                // 函数是对象，id 挂在func上 func 是闭包中的自由变量
                func.id = setTimeout(()=>{
                    func(args)
                },delay)
            }
        }
        // 
        

        inputa.addEventListener('input',handleNameSearch)
        inputb.addEventListener('input',debounceNameSearch)
    </script>
</body>
</html>